
<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">            
            <el-form-item label="部门名称" prop="deptName" >
                <el-input v-model="form.deptName" placeholder="请输入部门名称"  />
            </el-form-item>            
            <el-form-item label="上级" prop="parentIdDeptId" >
                <treeselect v-model="form.parentIdDeptId" :options="parentIdDeptIdTree" :normalizer="normalizer" placeholder="请选择所属分类" />
            </el-form-item>            
        </el-form>        
    </div>
</template>
<script>
import {
    getDept,
    createDept,
    updateDept,    
    listParentIdDeptId,    
} from "@/api/shim/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getUserProfile } from "@/api/system/user";
import {genCode} from '@/api/code.js';
import dayjs from 'dayjs'
export default {
    name: "DeptEditor",
    components:{        
        Treeselect,        
    },
    props: [        
    ],
    data() {
        return {            
            // parentIdDeptIdOptions关联表数据
            parentIdDeptIdOptions: [],            
            // parentIdDeptIdTree关联表数据
            parentIdDeptIdTree: [],            
            // 表单参数
            form: {},
            params: {},
            // 表单校验
            rules: {                
            },
            user:{}
        };
    },
    methods: {
        // 表单重置
        async reset() {            
            // 重新加载选项            
            await this.getParentIdDeptIdItems()            
            this.getTreeselect();            
            // 重置表单值
            this.form = {                
                deptId: undefined,                
                deptName: undefined,                
                parentIdDeptId: undefined,                
            };
            // 重置相关参数            
            this.resetForm("form");
        },        
        async show(params){
            await this.reset();
            getDept(params.deptId).then(response => {
                let data = response.data;                
                this.form = data;                
            });
        },        
        // 提前提交
        precreate(){
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (!this.form.deptId) {
                        createDept(this.form).then(response => {
                            if (response.code === 0) {
                                this.form.deptId = response.data.deptId;
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        // 正常提交
        submitForm: function(done) {
            this.$refs["form"].validate(valid => {
                if (valid) {                    
                    if (this.form.deptId != undefined) {
                        updateDept(this.form).then(response => {
                            if (response.code === 0) {
                                this.msgSuccess("修改成功");
                                done()
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    } else {
                        createDept(this.form).then(response => {
                            if (response.code === 0) {
                                this.msgSuccess("新增成功");
                                done()
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        genCode(){            
        },
        getUser() {
            return getUserProfile().then(response => {
                this.user = response.data;
            });
        },        
        /** 转换树状数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.name,
                children: node.children
            };
        },
        /** 查询树状结构 */
        getTreeselect() {            
            listParentIdDeptId(this.queryParams).then(response => {
                this.parentIdDeptIdTree = [];
                const data = { id: 0, name: '顶级节点', children: [] };
                data.children = this.handleTree(response.data.list||[], "id", "parentId");
                this.parentIdDeptIdTree.push(data);
            });            
        },        
        //关联sys_dept表选项
        getParentIdDeptIdItems() {
            return this.getItems(listParentIdDeptId, {pageSize:10000}).then(res => {
                this.parentIdDeptIdOptions = this.setItems(res, 'deptId', 'deptName')
            })
        },        
    }
};
</script>
<style>    
</style>